import './index.css'
import React, { useState, useEffect } from 'react';
import { Input, Button, DatePicker, Select, Table, Tag, Space, Pagination, Breadcrumb, Modal } from 'antd';
import Modalsee from './components/Modalsee/Modalsee'
import ModalseeC2 from './components/ModalseeC2/ModalseeC2'
import ModalseeCadd from './components/ModalseeCadd/ModalseeCadd'
import ModalseeCdel from './components/ModalseeCdel/ModalseeCdel'
import http from '../../../utils/http';

function CommentConfiguration() {

    //时间
    const { RangePicker } = DatePicker;
    function onChange(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    }
    function onOk(value) {
        console.log('onOk: ', value);
    }

    // 下拉框
    const { Option } = Select;
    function handleChange(value) {
        console.log(`selected ${value}`);
    }

    let [page, setpage] = useState(1)
    let [pageSize, setpageSize] = useState(10)
    let [total, stetotal] = useState('')


    // 条数
    const pagingtotal = () => {
        http({
            url: '/Comment/count',
            method: 'get',
        }).then((res) => {
            stetotal(res.data[0].count)
            // if(res.data[0].count%10==0){
            //     if((res.data[0].count/10)==1){
            //         setpage(res.data[0].count/10)
            //         console.log(res.data[0].count/10);
            //         setpage(1)
            //     }else{
            //         setpage(page-1) 
            //         console.log(page);
            //     }
            // }
        })
    }

    const fn = () => {
        // console.log(page);y
        http({
            url: '/Comment/configuration',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res) => {
            res.data && res.data.forEach((v, i) => {
                v.state == 1 ? v.state = "启用" : v.state = "禁用"
                v.Numerical_range = `${res.data[i].Health_value_Lower_limit_of_value}-${res.data[i].Health_value_Upper_limit_of_value}`
            });
            stecolumns(res.data)
        })
    }

    // 挂载
    const [columnsdata, stecolumns] = useState('')
    useEffect(() => {
        fn()
        pagingtotal()
    }, [page])

    const paging = (page, pageSize) => {
        setpage(page)
        fn()
    }


    //表格
    const columns = [
        {
            title: '健康值',
            dataIndex: "Numerical_range",
            key: "Numerical_range",
            width:100
        },
        {
            title: '表现',
            dataIndex: "performance",
            key: "performance",
            width:80
        },
        {
            title: '报告',
            dataIndex: 'report',
            key: 'report',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            width:60
        },
        {
            title: '操作',
            key: 'action',
            width:150,
            render: (text, record) => (
                <Space size="middle">
                    <Modalsee content={record}  />
                    <ModalseeC2 content={record} fn={fn}/>
                    <ModalseeCdel content={record} fn={fn} pagingtotal={pagingtotal} />
                </Space>
            ),
        },
    ];

    const data = [
        {
            HealthValue: '1-20',
            performance: '差',
            report: '改进膳食结构，均衡营养;摒弃不良生活习惯,戒烟限酒;合理安排生活工作,劳逸结合;制定定期疗养计划,避免长期超负荷工作',
            status: '启用',
        },
    ];

    return (
        <div id="CommentConfigurationbox">
            {/* <div>健康数据</div> */}
            <p>健康数据</p>
            <div className="Breadcrumb">
                <Breadcrumb>
                    {/* <Breadcrumb.Item>健康管理</Breadcrumb.Item> */}
                    <Breadcrumb.Item>
                        <a href="">健康管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">报告配置</a>
                    </Breadcrumb.Item>
                    {/* <Breadcrumb.Item>An Application</Breadcrumb.Item> */}
                </Breadcrumb>
            </div>
            <div className="h1_shuru_sc h1_shuru_cc">
                <div>
                    <ModalseeCadd fn={fn} pagingtotal={pagingtotal} />
                </div>
            </div>

            <Table
                columns={columns}
                dataSource={columnsdata}
                rowKey="Comment_configuration_id"
                pagination={false} />
            <div className="Pagination">
                <Pagination
                    onChange={paging}
                    rowKey="HealthValue"
                    total={total}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共${total}`}
                />
            </div>
            {/* <Modal cancelText='返回' okText='确认' width="715px" title={<CustomTitle3 ></CustomTitle3>} visible={isModalVisible3} onOk={handleOk3} onCancel={handleCancel3} footer={[<Button  id="ModalseeS3Btn1" key="back" onClick={handleCancel3}>返回</Button>,
            <Button id="ModalseeS3Btn2" key="submit" type="primary" onClick={handleOk3}>
                确认
            </Button>,
            ]}>
                {<Modalsee3></Modalsee3>}
            </Modal> */}

            {/* 添加 */}

        </div>
    )
}
export default CommentConfiguration